<template>
  <div class="item">
    <div  v-for="(item, index) of itemList" :key="index" >
    <van-card
      v-model="itemList[index].no"
      :num="item.num"
      :price="item.price"
      :desc="item.text"
      :title="item.name"
      :thumb="item.image"
      class="items"
    >
      <template #tags>
        <van-tag plain type="danger">{{item.tag}}</van-tag>
      </template>
      <template #footer>
        <van-button size="small" @click="add(index)">+</van-button>
        <van-button size="small" @click="Subtract(index)">-</van-button>
      </template>
    </van-card>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Card, Tag } from 'vant'
import { getAllItem, underTagItem } from '../rapper/shop/shop'

Vue.use(Card).use(Tag)
export default {
  name: 'Detalshop',
  data () {
    return {
      itemList: [],
      itemsList: [],
      all: 0
    }
  },
  props: {
    active: {
      type: Number,
      default: 0
    },
    id: {
      type: Number,
      default: 0
    }
  },
  created () {
    if (this.active === 0) {
      this.getAllItem()
    } else {
      this.underTagItem()
    }
  },
  methods: {
    async getAllItem () {
      try {
        const res = await getAllItem()
        this.itemList = res.data
        console.log(res.data)
      } catch (error) {
        console.log(error)
      }
    },
    async underTagItem () {
      try {
        const res = await underTagItem(this.id)
        this.itemsList = res.data
        for (const item of this.itemsList) {
          if (item.tagId === this.id) {
            this.itemList.push(item)
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    add (index) {
      this.itemList[index].num++
      this.$emit('newprice', 1, this.itemList[index].no)
    },
    Subtract (index) {
      if (this.itemList[index].num !== 0) {
        this.$emit('newprice', -1, this.itemList[index].no)
        this.itemList[index].num--
      } else {
        this.itemList[index].num = 0
      }
    },
    childmethod () {
      for (let i = 0; i < this.itemList.length; i++) {
        this.itemList[i].num = 0
      }
    }
  },
  computed: {
    num () {
      console.log('14')
      return this.itemList.num
    }
  },
  watch: {
    num (newValue, oldValue) {
      console.log('12312')
    }
  }
}
</script>

<style scoped>
.shop-bottom {
  margin-bottom: 50px;
}
.items {
  border: 3px solid white;
}
</style>
